<template>
    <div class="article-list">
        <div class="article-list-card">
            <!--<div class="article-list-height">-->
            <!--<router-link :to="{name:'article-list-edit-nocache'}">-->
            <!--<Button class="article-list-rightBtn" type="primary" size="large"><Icon type="plus-round"></Icon>新增文章</Button>-->
            <!--</router-link>-->
            <!--</div>-->
            <Row :gutter="5" style="margin-bottom: 10px">
                <!--<Col span="4">-->
                <!--<DatePicker  clearable v-model="searchData.timeStartEnd" style="width: 100%" type="daterange" placeholder="时间筛选"></DatePicker>-->
                <!--</Col>-->
                <!--<Col span="4">-->
                <!--<Input clearable v-model="searchData.loginName" placeholder="登录名" type="text"></Input>-->
                <!--</Col>-->
                <Col span="3">
                    <Input clearable v-model="searchData.title" placeholder="标题" type="text"></Input>
                </Col>
                <Col span="20">
                    <ButtonGroup class="subSearch">
                        <!--<Button @click="$router.push({name:'member-add-nocache'})" type="primary" icon="plus-round">新增</Button>-->
                        <Button  @click="searchGetList" type="primary"><Icon type="ios-pulse-strong"></Icon> 筛 选</Button>
                    </ButtonGroup>
                </Col>
            </Row>
            <i-table height="680" stripe :columns="columns" :data="data"></i-table>
            <div style="padding: 15px;">
                <Page @on-page-size-change="changeTiao" @on-change="changePage" :current="index" :total="total" show-elevator show-sizer :placement="'top'" :page-size="page_con" :page-size-opts="[10, 15, 20, 30, 40, 50]"></Page>
            </div>
        </div>
        <Modal v-model="modal2" width="360">
            <p slot="header" style="color:#f60;text-align:center">
                <Icon type="information-circled"></Icon>
                <span>删除确认</span>
            </p>
            <div style="text-align:center">
                <p>是否确认删除？</p>
            </div>
            <div slot="footer">
                <Button type="error" size="large" long :loading="modal_loading" @click="del">确认</Button>
            </div>
        </Modal>

        <Modal v-model="answer" width="360">
            <p slot="header" style="text-align:center">
                <a>回复留言</a>
            </p>
            <Form  :key="index" ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="70" style="margin-top: 20px">

                <FormItem label="标题" prop="title">
                    <Input v-model="formValidate.title" placeholder="请输入回复标题"></Input>
                </FormItem>

                <FormItem label="内容" prop="content" class="input_style">
                    <Input  type="text" placeholder="请输入回复内容" v-model="formValidate.content"></Input>
                </FormItem>
            </Form>

            <div slot="footer">
                <Button type="primary" size="large" long :loading="modal_loading" @click="answer_now">确认回复</Button>
            </div>
        </Modal>
        <Modal v-model="modal3" width="360">
            <p slot="header" style="text-align:center">
                <a>查看信息详情</a>
            </p>
            <Form :label-width="70" style="margin-top: 20px">
                <FormItem label="用户名">
                    <Input v-model="icecream.username"  readonly></Input>
                </FormItem>
                <FormItem label="标题">
                    <Input v-model="icecream.title"  readonly></Input>
                </FormItem>
                <FormItem label="留言时间">
                    <Input v-model="create_time"  readonly></Input>
                </FormItem>


                <FormItem label="是否">
                    <!--<RadioGroup v-model="icecream.ststus">-->
                    <!--<Radio label="1">已处理</Radio>-->
                    <!--<Radio label="0">未处理</Radio>-->
                    <!--</RadioGroup>-->
                    <Input v-model="icecream.status==1?'已处理':'未处理'"  readonly></Input>
                </FormItem>
                <FormItem label="添加时间">
                    <Input v-model="icecream.add_time"  readonly></Input>
                </FormItem>
                <FormItem label="面部照片">
                    <img :src="icecream.pic" style="width: 200px">
                </FormItem>
                <FormItem label="备注">
                    <Input v-model="icecream.beizhu"  readonly></Input>
                </FormItem>
                <FormItem label="内容">
                    <Input v-model="icecream.content"  readonly></Input>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>
<script>
    export default {
        name:"getmessage",
        data(){
            return{
                columns:[
                    {
                        title: '序号',
                        type: 'index',
                        width: 60,
                        align:"center",
                    },
                    {
                        title: '用户名',
                        key: 'username',
                        align:"center",
                    },
                    {
                        title: '标题',
                        key: 'title',
                        align:"center",
                    },
                    {
                        title: '留言时间',
                        key: 'add_time',
                        align:"center",
                        render:(h,params)=>{
                            return this.timeFormat(params.row.add_time)
                        }
                    },
                    {
                        title: '内容',
                        key: 'content',
                        align:"center",
                        // render:(h,params)=>{
                        //     return h('span',{
                        //         domProps: {
                        //             innerHTML: params.row.content
                        //         },
                        //         style:{
                        //             display: '-webkit-box',
                        //             overflow: 'hidden',
                        //             height:'40px'
                        //
                        //         }

                        // })
                        // }
                    },
                    // {
                    //     title: '图标',
                    //     key: 'articleimg',
                    //     align:"center",
                    //     width:100,
                    //     render:(h,params)=>{
                    //         if(params.row.articleimg==""){
                    //             return "暂无"
                    //         }else{
                    //             return h("div",{
                    //                 style:{
                    //                     cursor: "pointer",
                    //                 },
                    //     on:{
                    //         mouseover:(e)=>{
                    //             this.$store.commit("setImgData",{
                    //                 src:e.target.src||e.target.getElementsByTagName("img")[0].src||"",
                    //                 x:e.x+50+"px",
                    //                 y:e.y-60+"px",
                    //             })
                    //         },
                    //         mousemove:(e)=>{
                    //             this.$store.commit("setImgData",{
                    //                 src:e.target.src||e.target.getElementsByTagName("img")[0].src||"",
                    //                 x:e.x+50+"px",
                    //                 y:e.y-60+"px",
                    //             })
                    //         },
                    //         mouseout:(e)=>{
                    //             this.$store.commit("setImgData",{
                    //                 src:"",
                    //                 x:"0px",
                    //                 y:"0px",
                    //             })
                    //         }
                    //     }
                    // },[
                    //                 h("img",
                    //                     {
                    //                         attrs:{
                    //                             src:params.row.articleimg
                    //                         },
                    //                         style:{
                    //                             width:"42px",
                    //                             height:"42px",
                    //                             borderRadius:"4px",
                    //                             margin:"0px auto",
                    //                             display:"block",
                    //                         },
                    //                     })
                    //             ])
                    //         }
                    //     }
                    // },
                    // {
                    //     title: '分类',
                    //     key: 'catname',
                    //     align:"center",
                    // },
                    // {
                    //     title: '是否处理',
                    //     key: 'status',
                    //     align:"center",
                    //     width: 100,
                    //     render:(h,params)=>{
                    //         return h("div",
                    //             [
                    //                 // h("Icon",{
                    //                 //     props:{type: params.row.status==1?'eye':'eye-disabled'}
                    //                 // }),
                    //                 h("span",params.row.status==1?' 已处理':' 未处理')
                    //             ]
                    //         )
                    //     }
                    // },
                    // {
                    //     title: '排序号',
                    //     key: 'id',
                    //     align:"center",
                    //     width: 100,
                    // },
                    {
                        title: '状态',
                        key: 'status',
                        align:"center",
                        // render:(h,params)=>{
                        //     return this.timeFormat(params.row.add_time)
                        // }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        align: 'center',
                        width: 250,
                        render: (h, params) => {
                            return h('ButtonGroup', [
                                h('Button', {
                                    props: {
                                        type: 'warning',
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params.index)
                                        }
                                    }
                                },"回复"),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                    },
                                    on: {
                                        click: () => {
                                            this.details(params.index)
                                        }
                                    }
                                }, '详情'),
                                // h('Button', {
                                //     props: {
                                //         type: 'warning',
                                //     },
                                //     on: {
                                //         click: () => {
                                //             this.remove(params.index)
                                //         }
                                //     }
                                // },"删除"),
                                // h('Button', {
                                //     props: {
                                //         type: 'error',
                                //     },
                                //     on: {
                                //         click: () => {
                                //             this.remove(params.index)
                                //         }
                                //     }
                                // }, '删除')
                            ]);
                        }
                    },
                ],
                data:[],
                total:0,
                index:1,
                page_con:15,
                modal2:false,
                modal3:false,
                doIndex:0,//操作的下标
                modal_loading:false,
                icecream:[],
                status:'',
                create_time:"",
                searchData:{
                    title:""
                },
                formValidate:{
                    sendanswer:'',
                    answer:'',
                    content:''
                },
                ruleValidate:{
                    title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
                    content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
                },
                answer:false
            }
        },
        activated(){
            this.getArticleList()
        },
        methods:{
            getArticleList(){
                this.getJsonData("Question/showQuestionList",{
                    title:this.searchData.title
                })
                    .then((res)=>{
                        this.data=res.data
                        // this.total=parseInt(res.count)
                    })
            },
            changePage(n){
                this.index=n
                this.getArticleList()
            },
            changeTiao(num){
                this.page_con=num
                this.index=1
                this.getArticleList()
            },
            remove(n){
                this.doIndex = n
                if(this.status==0) {
                    this.modal2 = true
                }
            },
            show(n){
                this.doIndex=n
                this.answer=true
                this.getJsonData("Yuyue/index",{id:this.data[this.doIndex].id},true).then((res)=>{
                    this.icecream = res.view
                    this.create_time = `${this.timeFormat(res.view.add_time)}`
                })
            },
            details(n){
                this.doIndex=n

                this.getJsonData("Question/findQuestion",{id:this.data[this.doIndex].id},true).then((res)=>{
                    this.icecream = res.view
                    // this.create_time = `${this.timeFormat(res.list.yuyue_time)}`
                    this.modal3=true
                })

            },
            del(){
                this.modal_loading = true;
                this.getJsonData("Question/delQuestion",{id:this.data[this.doIndex].id},true)
                    .then((res)=>{
                        this.getArticleList()
                        this.modal_loading = false;
                        this.modal2 = false;
                        this.$Message.success('已删除');
                    }).catch((res)=>{
                    this.modal_loading = false;
                    this.modal2 = false;
                })
            },
            searchGetList(){
                this.index=1
                this.getArticleList()
            },
            answer_now(){
                this.modal_loading = true;
                this.getJsonData("Question/reQuestion",{
                    questionid:this.data[this.doIndex].id,
                    title:this.formValidate.title,
                    content:this.formValidate.content
                },true)
                    .then((res)=>{
                        this.getArticleList()
                        this.modal_loading = false;
                        this.answer = false;
                        this.$Message.success('回复成功');
                    }).catch((res)=> {
                    this.modal_loading = false;
                    this.answer = false;
                })
            },
            shownow(){
                this.modal_loading = true;
                this.getJsonData("Art/runArtStatus",{id:this.data[this.doIndex].id},true)
                    .then((res)=>{
                        this.getArticleList()
                        this.modal_loading = false;
                        this.modal3 = false;
                        this.$Message.success('操作成功');
                    }).catch((res)=>{
                    this.modal_loading = false;
                    this.modal3 = false;
                })
            },
            tiao(n){
                this.$router.push({name:"article-add-nosave",query:{isEdit:true,id:this.data[n].id,type:2}})
            },
        }
    }
</script>
<style lang="less">
    @import "./getmessage";
</style>